import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input, message } from 'antd'
import { useState } from 'react'

import UserApi from '@/service/apis/UserApi'
import { LoginFormData } from '@/service/models/UserModel'
import { useAuthStore } from '@/store/AuthStore'

const Login = () => {
  const { login } = useAuthStore()
  const [loading, setLoading] = useState(false)

  const onFinish = async (values: LoginFormData) => {
    setLoading(true)

    const res = await UserApi.login(values)
    setLoading(false)
    if (res.success) {
      login(res.data)
    } else {
      // console.log()
      message.error(res.message)
    }
  }

  return (
    <div className="flex items-center justify-center h-screen">
      <div className="shadow-lg shadow-black-500/50 w-96 bg-slate-400 p-10">
        <Form
          className="min-w-800"
          name="basic"
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<string>
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input
              prefix={
                <UserOutlined
                  className="site-form-item-icon"
                  style={{ color: 'rgba(0, 0, 0, 0.25)' }}
                />
              }
              placeholder="Username"
            />
          </Form.Item>

          <Form.Item<string>
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password
              prefix={
                <LockOutlined
                  className="site-form-item-icon"
                  style={{ color: 'rgba(0, 0, 0, 0.25)' }}
                />
              }
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              Forgot password
            </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} block>
              Log in
            </Button>
            Or <a href="">register now!</a>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
